<template>
    <div id="container">
        
            <div class="charging" style="display: flex;">
                <el-card id="elcard" :body-style="{ padding: '0px' }">
                 <div style="display: flex;text-align: center;">
                    <div style="padding: 14px;align-items: center;" >
                        <img :src="img1" style="width: auto;" ><br>
                        <span>充电站</span>
                    </div>
                    <div style="margin: auto;">
                        <h2>{{this.totalStations}}个</h2>
                    </div>
                </div>
                </el-card>
            </div>

            <div class="charging2" style="display: flex;">
                <el-card id="elcard" :body-style="{ padding: '0px' }">
                 <div style="display: flex;text-align: center;">
                    <div style="padding: 14px;align-items: center;" >
                        <img :src="img2"><br>
                        <span>充电桩</span>
                    </div>
                    <div style="margin: auto;">
                        <h2>{{this.totalChargers}}个</h2>
                    </div>
                </div>
                </el-card>
            </div>

            <el-card class="searchList" style="text-align: center;">
                <el-form label-width="auto">
                    <el-form-item class="search-content">
                        <el-input
                            style="width: 250px;"
                            placeholder="请输入充电站名称搜索"
                            v-model="input2">
                        </el-input>
                        <el-button  icon="el-icon-search" @click="searchChargingByName"></el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-table
                        :row-style="{height:'10px'}"
                        :cell-style="{padding:'0px'}"
                        :data="tableData"
                        height="250"
                        @row-click="handleRowClick"
                        border
                        style="width: 100%;font-size: 10px;"
                        >
                        <el-table-column
                        prop="stationName"
                        label="充电站名称"
                        width="100">
                        </el-table-column>
                        <el-table-column
                        prop="num1"
                        label="汽车充电桩数"
                        width="100">
                        </el-table-column>
                        <el-table-column
                        prop="num2"
                        label="电瓶车充电桩数"
                        width="100">
                        </el-table-column>
                    </el-table>
                    </el-form-item>
                </el-form>
            </el-card>
    </div>
</template>
  <script>
  import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: "map-view",
    data() {
        return {
            img1:require('@/assets/BaiSuXin/station/u1623.svg'),
            img2:require('@/assets/BaiSuXin/station/u1630.svg'),
            map:null,
            infoWindowTemp:null,
            totalStations:50,
            totalChargers:300,
            input2:'',
            tableData:[{
              stationName:'知更鸟充电站1',
                num1:100,
                num2:20
            }]
        }
    },
    mounted() {
      this.initChargingStation()
    },
    unmounted() {
      this.map?.destroy();
      this.destory()
    },
    created() {
      
    },
    methods: {
      initAMap() {

        window._AMapSecurityConfig = {
          securityJsCode: "662fbe98d51ed66b3af132d79149986e",
        };
        AMapLoader.load({
          key: "648faa703ebe180c724b7cd453d98765", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "2D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [118.797466, 32.087265], // 初始化地图中心点位置
            });
            console.log("==121212121212121==")
            console.log(this.tableData)
            //创建一个 Marker 实例：
            this.tableData.forEach(station => {
              console.log("===%%%%%%==");
              
              console.log(station.longitude)
              console.log(station.latitude);
              const marker = new AMap.Marker({
              
              position: new AMap.LngLat(station.longitude, station.latitude), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: station.stationName,
              });
              const content = [
              `<div><b>${station.stationName}</b>`,
              `地址 : ${station.stationLocation}`,
              `电话 : ${station.phoneNumber}</div>`,
              ];
              // 创建 infoWindow 实例
              const infoWindow = new AMap.InfoWindow({
              content: content.join("<br />"), //传入字符串拼接的 DOM 元素
              anchor: "top-left",
              });
              // 绑定事件到 Marker
              marker.on("mouseover", () => {
                let infoWindowParam={}
                infoWindowParam.infoWindow=infoWindow
                infoWindowParam.longitude=station.longitude
                infoWindowParam.latitude=station.latitude
                this.openInfo(infoWindowParam);
              });
              marker.on("mouseout", () => {
                this.closeInfo();
              });
              // 将 Marker 添加到地图上
              this.map.add(marker);
              console.log("Mark添加结束");
              
            });
              




            // //创建点标记的点击事件
            // marker1.on("mouseover",this.openInfo);
            // marker1.on("mouseout",this.closeInfo);
            // marker2.on("mousemove",this.openInfo);
            // marker3.on("mouseover",this.openInfo);
            // //将创建的点标记添加到已有的地图实例：
            // //多个点实例组成的数组
            // const markerList = [marker1, marker2, marker3];
            // this.map.add(markerList);
          })
          .catch((e) => {

            console.log("==marker1Over==");
            console.log(e);
          });
      },
       openInfo(infoWindowParam) {
        console.log("==infoWindowParam==")
        console.log(infoWindowParam)
        // //信息窗体的内容
        // var content = [
        // "<div><b>高德软件有限公司</b>",
        // "电话 : 010-84107000   邮编 : 100102",
        // "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
        // "<img src='https://ts1.cn.mm.bing.net/th/id/R-C.4ecb58833cdaf5fe252c5fbd12d29be1?rik=jkljBq0ktpL6aQ&riu=http%3a%2f%2fimg.ndsww.com%2fa%2f10001%2f202210%2fd7d908f91dfa5ac35a584d6a6f86cba2.jpeg&ehk=rB3Hgp5kffi1yCRyll4QPDTHIF4hLSVZe4o42gc6MbE%3d&risl=&pid=ImgRaw&r=0' width='200' height='100'></div>",
        // ];

        // //创建 infoWindow 实例
        // var infoWindow = new AMap.InfoWindow({
        // content: content.join("<br>"), //传入字符串拼接的 DOM 元素
        // anchor: "top-left",
        // });
        this.infoWindowTemp=infoWindowParam.infoWindow
        //打开信息窗体
        infoWindowParam.infoWindow.open(this.map, [infoWindowParam.longitude, infoWindowParam.latitude]); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
      },
      closeInfo() {
        this.infoWindowTemp.close()
      },
      initChargingStation() {
        this.$axios.get('api/chargingStation/initMapStation')
        .then(resp=>{
          console.log(resp.data)
          if(resp.data.code==200) {
            this.tableData=resp.data.data
            let param=resp.data.data[0];
            this.totalChargers=param.totalChargers
            this.totalStations=param.totalStations
            this.initAMap();
          }
        })
      },
      handleRowClick(row, column, event) {
      console.log('点击了一行', row);
      this.$router.push({path:'/deviceStatus',query:{'id':row.id}})
      },
      searchChargingByName() {
        let param={}
        param.stationName=this.input2
        this.$axios.post('api/chargingStation/stationNameSearchMap',param)
        .then(resp=>{
          console.log(resp.data)
          if(resp.data.code==200) {
            this.tableData=resp.data.data
          }
        })
      }

    },
  };
  </script>
  <style scoped>
  #container {
    width: 100%;
    height: 800px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1
  }
  .charging {

    position: absolute; /* 绝对定位 */
    top: 80px; /* 距离顶部的距离 */
    right: 200px; /* 距离右侧的距离 */
    z-index: 1000; /* 确保图片在最上层 */
    }
    .charging2 {

    position: absolute; /* 绝对定位 */
    top: 80px; /* 距离顶部的距离 */
    right: 30px; /* 距离右侧的距离 */
    z-index: 1000; /* 确保图片在最上层 */
    }
    #elcard{
        height: 100px;
        width: 170px;
    }
    .searchList{
        position: absolute; /* 绝对定位 */
        top: 180px; /* 距离顶部的距离 */
        right: 30px; /* 距离右侧的距离 */
        z-index: 1000; /* 确保图片在最上层 */
    }
    .search-content {
      display: flex;
    }
  </style>
  